<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		.container {
			display: flex;
			justify-content: space-around;
		}

		.container div:not(.row-auto, .column-auto) {
			margin: 10px;
			background-color: brown;
		}

		.row-auto {
			min-width: 300px;
			background-color: skyblue;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: 100px;
			grid-auto-rows: 100px;
		}

		.column-auto {
			height: 300px;
			background-color: yellowgreen;
			display: grid;
			grid-template-rows: repeat(3, 1fr);
			grid-template-columns: 100px;
			grid-auto-flow: column;
			grid-auto-columns: 100px;
		}
	</style>
</head>

<body>
	<p>1.左侧的行根据子项自适应增加（请手动修改html）</p>
	<p>2.右侧的列根据子项自适应增加</p>
	<div class="container">
		<div class="row-auto">
			<div>01</div>
			<div>02</div>
			<div>03</div>
			<div>04</div>
			<div>05</div>
			<div>06</div>
			<div>07</div>
			<div>02</div>
			<div>03</div>
			<div>04</div>
			<div>05</div>
			<div>06</div>
			<div>07</div>
		</div>
		<div class="column-auto">
			<div>01</div>
			<div>02</div>
			<div>03</div>
			<div>04</div>
			<div>05</div>
			<div>06</div>
			<div>07</div>
			<div>02</div>
			<div>03</div>
			<div>04</div>
			<div>05</div>
			<div>06</div>
			<div>07</div>
		</div>
	</div>

</body>

</html>